import React, { useState, useEffect } from "react"
import {
  Input,
  Space,
  Select,
  Button,
  Drawer
} from 'antd';
import { UpOutlined, DownOutlined } from '@ant-design/icons'

import style from './Lists.module.scss'
import type { ConfigProviderProps } from 'antd';
import { getClassList } from '../../../../../service'


const { Option } = Select;
const handleChange = (value: string) => {
  console.log(value);
  console.log(1)
};

const Lists = () => {

  const [isShow, setIsShow] = useState<boolean>(false)

  useEffect(() => {
    getClassList()
  }, [])
  return (
    <>
      <div className={style.box}>

        <div className={style.class}>班级名称:<Input defaultValue="" style={{ width: '70%' }} /></div>
        <div className={style.teacher}> 老师:
          <Select
            style={{ width: '80%' }}
            showSearch
            placeholder="请选择"
            filterOption={(input, option) =>
              (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
            }
            options={[
              { value: '1', label: 'Jack' },
              { value: '2', label: 'Lucy' },
              { value: '3', label: 'Tom' },
            ]}
          />
        </div>

        <div className={style.search}>
          {isShow &&
            <div className={style.Selects}>
              科目类别:<Select
                defaultValue="请选择"
                style={{ width: 240 }}
                onChange={handleChange}
                options={[
                  { value: 'jack', label: 'Jack' },
                  { value: 'lucy', label: 'Lucy' },
                  { value: 'Yiminghe', label: 'yiminghe' },
                  { value: 'disabled', label: 'Disabled', disabled: true },
                ]}
              />
            </div>
          }

          <div className={style.btn}>
            <Button color="purple" variant="outlined">
              重置
            </Button>
            <Button color="purple" variant="solid">
              查询
            </Button>
            {!isShow ? <span onClick={() => setIsShow(!isShow)}>展开<DownOutlined /> </span> : <span onClick={() => setIsShow(!isShow)} >收起<UpOutlined /></span>}
          </div>
        </div>
      </div>
    </>
  )
}

export default Lists